<template>
    <!--我的消息页面-->
    <div>
        <!--顶部导航栏-->
        <!--        <top-nav @updateUser="setCurrentUser" ></top-nav>-->
        <top-nav @updateMsg="setMsgNums"></top-nav>

        <!--中间主体内容-->
        <!--        <h1>welcome to my message page</h1>-->
        <el-row type="flex" justify="center">
            <!--左边竖直导航-->
            <el-col :span="4" class="border">
                <!--                左边竖直导航-->
                <!--默认激活值为当前 路径， 这样就可以在直接访问子路由的时候根据路由值 初始化默认激活项-->
                <el-menu :default-active="$route.path" class="el-menu-demo" :router="true">
                    <el-menu-item index="/myMsg/comment">
                        评论
                        <el-badge class="mark" :value="unreadNums.cmt" :hidden="unreadNums.cmt === 0" :max="99"/>
                    </el-menu-item>
                    <el-menu-item index="/myMsg/reply">
                        回复
                        <el-badge class="mark" :value="unreadNums.rpl" :hidden="unreadNums.rpl === 0" :max="99"/>
                    </el-menu-item>
                    <el-menu-item index="/myMsg/subscribe">
                        点赞
                        <el-badge class="mark" :value="unreadNums.sbc" :hidden="unreadNums.sbc === 0" :max="99"/>
                    </el-menu-item>
                    <el-menu-item index="/myMsg/collect">
                        收藏
                        <el-badge class="mark" :value="unreadNums.clt" :hidden="unreadNums.clt === 0" :max="99"/>
                    </el-menu-item>
                </el-menu>
            </el-col>

            <!--右边消息内容渲染  - 分为 评论、回复、点赞和收藏 四种消息-->
            <el-col :span="15" class="border">
                <!--渲染子路由，必须是当前组件的子路由 组件  才可以在当前页面的这俄格模块进行内容渲染，-->
                <!--如果是跳转到一个别的页面（分当前页面子路由） 会直接进行整体的页面跳转而不是在这个模块进行渲染-->
                <router-view></router-view>
            </el-col>
        </el-row>

        <!--底部版权-->
        <el-row type="flex" justify="center">
            <el-col :span="15">
                <copy-right></copy-right>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    import navigateBar from "@/components/component/navigateBar";
    import btmCopyRight from "@/components/component/btmCopyRight";

    export default {
        name: "myMsg",
        provide(){
            // 将设置类型消息 未读数的方法 暴露出去 以供子页面调用修改
            return{
                setMsgUnreadNumsByType: this.setMsgUnreadNumsByType,
            }
        },
        data() {
            return {
                unreadNums: { // 四种消息类型的未读数量  初始化默认都为0
                    cmt: 0,
                    rpl: 0,
                    sbc: 0,
                    clt: 0
                },
            }
        },
        created() {  /*加载页面时执行*/
            // 获取当前登录用户各种消息未读数
            // this.getUnreadNums();
        },
        mounted() {

        },
        methods: {
            // 设置未读消息数， 由顶部导航栏先请求获取后 触发父组件事件 设置(将顶部导航栏获取到的未读消息数 同步过来)
            setMsgNums(msgNums) {
                // 直接赋值 因为是引用的拷贝，修改和顶部导航栏的对象同步
                this.unreadNums = msgNums;
            },

            setMsgUnreadNumsByType(msgType, num) {
                switch (msgType) {
                    case 1: // 评论
                        console.log("设置评论消息为" + num);
                        this.unreadNums.cmt = num;
                        break;
                    case 2:  // 回复
                        this.unreadNums.rpl = num;
                        break;
                    case 3: // 点赞
                        this.unreadNums.sbc = num;
                        break;
                    case 4:  // 收藏
                        this.unreadNums.clt = num;
                        break;
                    default:
                        this.$message.error('解析消息类型时出错！');
                }
            },
        },
        components: {
            'topNav': navigateBar,
            'copyRight': btmCopyRight,  // 底部的版权组件

        }
    }
</script>

<style scoped>

</style>